<template>
  <view class="map-page">
    <!-- 调试信息 -->
    <view class="coords-debug">
      当前经纬度：
      <text>经度 {{ longitude.toFixed(6) }}</text>
      <text>纬度 {{ latitude.toFixed(6) }}</text>
    </view>

    <map
        class="map"
        :longitude="longitude"
        :latitude="latitude"
        :scale="16"
    :show-location="false"
    :markers="markers"
    ></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      longitude: 104.691888,
      latitude: 31.492774,
      markers: [
        {
          id: 1,  // 唯一标识（必填）
          longitude: 104.691888,
          latitude: 31.492774,   // 自习室纬度
          width: 20,
          height: 30,
          callout: {
            content: "你的自习室\n★★★★★ 5星级",
            bgColor: "#fff",
            color: "#7b61ff",
            fontSize: 14,
            padding: 8,
            display: "ALWAYS"  // 一直显示弹窗
          },
          clickable: true
        }
      ]
    };
  },
  onReady() {
    this.initMap();
  },
  methods: {
    initMap() {
      console.log("地图初始化：", {
        center: {lon: this.longitude, lat: this.latitude},
        marker: this.markers[0]
      });
    }
  }
};
</script>

<style scoped>
.map-page {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.coords-debug {
  position: fixed;
  top: 20rpx;
  left: 20rpx;
  z-index: 999;
  background: rgba(255, 255, 255, 0.9);
  padding: 16rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  line-height: 1.6;
}

.coords-debug text {
  display: block;
  margin-top: 8rpx;
}

/* 地图必须设置宽高，否则不显示 */
.map {
  width: 100%;
  height: 100%;
}
</style>